<template>
    <div class="Chart">
        <div id="lineChart">
            
        </div>
    </div>
</template>

<script>
//折线图组件
//局部引入echarts
// 引入基本模板
let echarts = require('echarts/lib/echarts')
//折线图
require('echarts/lib/chart/line')
//标题组件
require('echarts/lib/component/title')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')

import {draw} from '@/untils/drawChart/drawChart'
export default {
    name:'Chart',
    props:{
        chart_info:{
            type:[Array,Object,String]
        }
    },
    mounted(){
        //created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
        //mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
        //this.draw('lineChart')
        
    },
    watch:{
        chart_info:{
        // 内部对应的观察函数
            handler:function(val,oldVal){
                //横坐标数组时间
                let xAxis_data = []

                for(let i in val){
                    xAxis_data[i] = val[i].time
                }
     
                //纵坐标数据series个数
                let series_data = []

                for(let i in val){
                    series_data[i] = val[i].num_now_people
                }
                draw('lineChart',xAxis_data,series_data,echarts,'每日访问人数','访问人数')
            },
            deep: true
        }
    }
}
</script>

<style scoped>
.Chart{
    width: 100%;
    margin: 20px 0;
    position: relative;
    z-index: 0;
}
.Chart #lineChart{
    width: 100%;
    height: 400px;
}
</style>